<template>
    <div :ref="id" class="container"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: {
        id: String,
        data: Object
    },
    data() {
        return {
            chart: null,
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', () => this.resize(), false);
        if (this.chart) {
            this.chart.dispose();
        }
    },
    watch: {
        data: {
            handler(oldV, newV) {
                setTimeout(() => {
                    this.initChart()
                }, 200);
            },
            immediate: true
        }
    },

    methods: {

        initChart() {
            let commonInfo = {
                pointer: {show: false},
                axisLabel: {show: false},
                pointer: {show :false},
                detail: {show :false},
                splitLine: {show: false},
                axisTick: {show: false},
                startAngle: 90,
                endAngle: -270,
                type: 'gauge',
                center: ['50%', "50%"],
            }
            let tipInfo = this.data;
            let option = {
                tooltip: {
                    formatter(params, ticket) {
                        return `<div style="text-align:left;color:#FFF;font-size:16px;padding:0px 8px">
                            <div>内景数:${tipInfo.count1}<span style="opacity: 0.72;">个</span></div>
                            <div style="padding:8px 0">签约外景:${tipInfo.count2}<span style="opacity: 0.72;">个</span></div>
                            <div>摄影棚数:${tipInfo.count3}<span style="opacity: 0.72;">个</span></div>
                        </div>`
                    },
                    borderWidth: 0,
                    backgroundColor: '#011a2f'
                },
                series: [
                    {
                        name: '内景数',
                        radius: '96%',
                        progress: {
                            show: true,
                            itemStyle: {
                                width: 10,
                                color: '#64E6E2',
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        data: [{value: this.data.percentage1, }],
                        ...commonInfo
                    },
                    {

                        radius: '100%',
                        axisLine: {
                            lineStyle: {
                                color: [[1, '#0884FF']],
                                opacity: 0.24,
                                width: 18
                            }
                        },
                        data: [{value: this.data.percentage1, }],
                        ...commonInfo
                    },
                    {
                        name: '摄影棚数',
                        radius: '68%',
                        progress: {
                            show: true,
                            itemStyle: {
                                width: 10,
                                color: '#0884FF',
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        data: [{value: this.data.percentage2, }],
                        ...commonInfo
                    },
                    {
                        radius: '72%',
                        axisLine: {
                            lineStyle: {
                                color: [[1, '#0884FF']],
                                opacity: 0.24,
                                width: 18
                            }
                        },
                        data: [{value: this.data.percentage2, }],
                        ...commonInfo
                    },
                    {
                        radius: '40%',
                        progress: {
                            show: true,
                            itemStyle: {
                                width: 10,
                                color: '#BF5AF2',
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        data: [{value: this.data.percentage3, }],
                        ...commonInfo
                    },
                    {
                        radius: '44%',
                        axisLine: {
                            lineStyle: {
                                color: [[1, '#0884FF']],
                                opacity: 0.24,
                                width: 18
                            }
                        },
                        data: [{value: this.data.percentage3, }],
                        ...commonInfo
                    },
                  
                ]
            }
            this.chart = echarts.init(this.$refs[this.id]);
            this.chart.setOption(option);
            window.addEventListener('resize', () => this.resize(), false)
        },
        resize() {
            if (this.chart) {
                this.chart.resize();
            }
        },
       
    }
}
</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
}
</style>